import React, { useEffect, useState } from 'react'
import axios from "axios"
import "./HeroList.css"
import PubSub from 'pubsub-js'
import { Link, useNavigate } from 'react-router-dom'
export default function HeroList() {
    let [heros, setheros] = useState([])
  let navigate =   useNavigate()
  let chang = (iteam)=>{
   return ()=>{
    navigate(`/herotext?id=${iteam.id}`)
   } 
  }
    useEffect(() => {
        PubSub.subscribe("keysearch", async (mes, data) => {
            let res = await axios.get(`http://api.xiaohigh.com/heros?name_like=${data}`)
            setheros(res.data)
            
        })


        async function main() {
            let { data } = await axios({
                method: "get",
                url: "http://api.xiaohigh.com/heros"
            })
            let newdata = data.slice(0, 106)
    
            setheros(newdata)
        }
        main()
        return  ()=>{
            PubSub.unsubscribe("keysearch");
        }
    }, [])

    return (
        <div>
           
            <ul className='herobox'>
                {
                    heros.map((iteam) => {
                       
                        // return <li key={iteam.id}>
                        //          <Link  to={`/herotext/${iteam.id}`}>
                        //     <img src={`http://cdn.xiaohigh.com${iteam.image}`} alt="" /> <br />
                        //     <span>{iteam.name}</span>
                        //     </Link>
                        // </li>
            //           return  <li key={iteam.id}>
            //             <Link  to={`/herotext?id=${iteam.id}`}>
            //        <img src={`http://cdn.xiaohigh.com${iteam.image}`} alt="" /> <br />
            //        <span>{iteam.name}</span>
            //        </Link>
            //    </li>

            return  <li key={iteam.id} onClick={chang(iteam)}>
            <Link  to={`/herotext`} state={{id:iteam.id}}>
       <img src={`http://cdn.xiaohigh.com${iteam.image}`} alt="" /> <br />
       <span>{iteam.name}</span>
       </Link>
   </li>
                        
                    })
                }
                {
                    heros.length===0&&<li>暂无英雄，敬请期待！</li>
                }
                

            </ul>
        </div>
    )
}
